import React, {useEffect, useMemo} from 'react';
import {connect, Dispatch} from 'umi';
import {ConnectState} from '@/models/connect';
import createG6 from "@/components/G6Create";
import G6 from '@antv/g6';

require("./index.less")

interface IProps {
  dispatch: Dispatch;
  data: any;
  width: number;
  height?: number;
  // onSave: ({column, alias}: any) => void
  // onCancel: () => void
}
const clientHeight = document.body.clientHeight
const FilterRelationship: React.FC<IProps> = (props) => {
  const {data, width, height} = props
  /**
   * 图表渲染
   * @param chart
   * @param configs
   */

  const g6Create = (graph: any, configs: any, graphId: any) => {
    G6.registerNode('card-node', {
      draw: function drawShape(cfg: any, group: any) {
        const r = 2;
        const color = '#5B8FF9';
        const w = 150;
        const h = cfg.size[1];
        const shape = group.addShape('rect', {
          attrs: {
            x: -w / 2,
            y: -h / 2,
            width: w, //200,
            height: h, // 60
            stroke: color,
            radius: r,
            fill: '#fff',
          },
          name: 'main-box',
          draggable: true,
        });

        group.addShape('rect', {
          attrs: {
            x: -w / 2,
            y: -h / 2,
            width: w, //200,
            height: h / 2, // 60
            fill: color,
            radius: [r, r, 0, 0],
          },
          name: 'title-box',
          draggable: true,
        });

        // title text
        group.addShape('text', {
          attrs: {
            textBaseline: 'top',
            x: -w / 2 + 8,
            y: -h / 2 + 2,
            lineHeight: 20,
            text: cfg.name,
            fill: '#fff',
          },
          name: 'title',
        });
        cfg.children &&
        group.addShape('marker', {
          attrs: {
            x: w / 2,
            y: 0,
            r: 6,
            cursor: 'pointer',
            symbol: G6.Marker.collapse,
            stroke: '#666',
            lineWidth: 1,
            fill: '#fff',
          },
          name: 'collapse-icon',
        });
        group.addShape('text', {
          attrs: {
            textBaseline: 'top',
            x: -w / 2 + 8,
            y: -h / 2 + 24,
            lineHeight: 20,
            text: cfg.viewName,
            fill: 'rgba(0,0,0, 1)',
          },
          name: `description`,
        });
        return shape;
      },
      setState(name, value: any, item: any) {
        if (name === 'collapsed') {
          const marker = item.get('group').find((ele: any) => ele.get('name') === 'collapse-icon');
          const icon = value ? G6.Marker.expand : G6.Marker.collapse;
          marker.attr('symbol', icon);
        }
      },
    });

    graph.data(data);
    graph.render();
    graph.fitView();
    graph.on('node:click', (e: any) => {
      if (e.target.get('name') === 'collapse-icon') {
        e.item.getModel().collapsed = !e.item.getModel().collapsed;
        graph.setItemState(e.item, 'collapsed', e.item.getModel().collapsed);
        graph.layout();
      }
    });

  }
  let G6Create = createG6(g6Create);
  useEffect(() => {
    G6Create = createG6(g6Create);

  }, [props.data])

  const g6Config = {
    modes: {
      default: [
        {
          type: 'collapse-expand',
          onChange: function onChange(item: any, collapsed: any) {
            const data = item.get('model').data;
            data.collapsed = collapsed;
            return true;
          },
        },
        'drag-canvas',
        'zoom-canvas',
      ],
    },
    defaultNode: {
      type: 'card-node',
      size: [100, 40],
      style: {
        fill: '#C6E5FF',
        stroke: '#5B8FF9',
      },
    },
    defaultEdge: {
      type: 'cubic-horizontal',
      style: {
        stroke: '#A3B1BF',
        endArrow: true,
      },
    },
    layout: {
      type: 'indented',
      direction: 'LR',
      dropCap: false,
      indent: 200,
      getHeight: () => {
        return 60;
      },
    },
  }
  const G2Chart = useMemo(() => <G6Create
    width={width}
    height={clientHeight}
    g6Config={g6Config}
  />, [props])
  return (
    <div>
      {G2Chart}
    </div>

  )
};
export default connect(({sheet, dataRole}: ConnectState) => ({
  sheetList: sheet.sheetList
}))(FilterRelationship);
